<template>
   <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    :collapse-transition="false"
  >
   
    <el-menu-item @click="clickMenu(n)" v-for="n in menuDate_up" :key="n.path" :index="n.path">
      <component  class="icons" :is="n.icon"></component>
      <template #title><span style="font-size: 16px;">&nbsp;&nbsp;{{ n.label }}</span></template>
    </el-menu-item>
    
  </el-menu>
  <el-menu
     default-active="2"
    class="el-menu-vertical-demo"
    :collapse-transition="false"
    :collapse="isCollapse"
   >
   <el-menu-item @click="clickMenu(n)" v-for="n in menuDate_dowm" :key="n.path" :index="n.path">
      <component class="icons" :is="n.icon"></component>
      <template #title><span style="font-size: 16px;">&nbsp;&nbsp;{{ n.label }}</span></template>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts" name="Collect">
  import {useStore} from '@/stores/index'
  import { storeToRefs } from 'pinia';
  const {isCollapse} =  storeToRefs(useStore())
  import { useRouter } from 'vue-router';
  const router = useRouter()
 
  const menuDate_up =[
           {
              path: '/home',
              name: 'home',
              label: '首页',
              icon: 'House',
              url: 'Home.vue'
            },
            {
              path: '/love',
              name: 'love',
              label: '收藏',
              icon: 'Star',
              url: 'Love.vue'
              },
             {
              path:'/more',
              name:'more' ,
              label:'更多',
              icon:'More',  
              url:'More'
             }
              
      
             
     ]
  const menuDate_dowm=[
           {
              path: '/setting',
              name: 'setting',
              label: '设置',
              icon: 'Setting',
              url: 'setting.vue'
            },
            {
              path: '/user',
              name: 'user',
              label: '用户',
              icon: 'User',
              url: 'user.vue'
              },
            ]
    function clickMenu(n:any) {
     if(n.name !== 'user') {
      router.push({
        name: n.name 
      }
      )}
    }
</script>

<style scoped>
     .icons{
     width: 25px;
     height: 25px;
     color: black;
  }
    .el-menu{
       border:none;
    
    }
</style>